<template>
  <div>
    <!-- 条件渲染 -- 一定要在有异常请求时，加上 -->
    <loading v-if="filmid === 0" />
    <template v-else>
      <!-- 让组件在有数据时重新创建一次 -->
      <topnav v-if="filminfos[$route.params.id]" :filminfos="filminfos[$route.params.id].name" />
      <container v-if="filminfos[$route.params.id]" :info="filminfos[$route.params.id]" />
    </template>
  </div>
</template>

<script>
import { mapActions, mapMutations, mapGetters, mapState } from 'vuex'
import container from './ui/container.vue'
import topnav from './ui/topnav.vue'
export default {
  components: { topnav, container },
  // 组件内守卫 -- 它是组件生命周期都还没有执行时就会触发，所以在此处写，有利用组件优化
  beforeRouteEnter(to, from, next) {
    let id = to.params.id || 0
    if (isNaN(Number(id)) || id === 0) {
      next('/404')
    } else {
      // 符合条件要让它继续向下
      next()
    }
  },

  computed: {
    // 参数1：命名空间名称 自动导入，文件名称就是命名空间名称
    // 参数2: 数组，数组中的元素就是state中的key
    // 此处得到的是一个带有 电影id的对象集合，它不是一个具体的电影对象
    ...mapState('film', ['filminfos', 'filmid']),
  },

  created() {
    // 设置电影id
    this.setFilmId(this.$route.params.id)
    //根据电影id，获取电影详情
    this.getFilmInfo(this.$route.params.id)

    this.$store.commit('setPageFooter', false)
  },
  beforeDestroy() {
    this.$store.commit('setPageFooter', true)
  },
  methods: {
    ...mapActions('film', ['getFilmInfo']),
    ...mapMutations('film', ['setFilmId']),

    test() {
      console.log(this.filminfos[+this.$route.params.id])
    },
  },
}
</script>

<style lang="scss" scoped>
</style>